<!--
 * @Description: 
 * @Author: 客
 * @Date: 2024-11-07 08:43:52
 * @LastEditors: 客
 * @LastEditTime: 2024-11-07 11:22:03
 * 这课真牢啊
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <!-- 内部脚本 -->
  <script>
    function add(a, b) {
      console.log('🤡 CC - add -  a + b:', a + b);
      return a + b;
    }
    var c = add(1, 2);
    console.log('🤡 CC - c:', c);
    var myAdd = function (a, b) {
      return a + b;
    }
    var d = myAdd(1, 2);
    console.log('🤡 CC - d:', d);
  </script>
  <!-- 外部脚本 -->
  <!-- <script src="./js/index.js"> -->
  </script>

</head>

<body>
  喜欢的水果：<input id="inputFruit" type="text" placeholder="请输入您喜欢的水果" value="苹果">
  <br>
  <!-- 给按钮绑定事件 -->
  <input id="btn1" type="button" value="按钮1" onclick="clickBtn1()">
  <input id="btn2" type="button" value="按钮2" onclick="add(1,2)">
  <input id="btn3" type="button" value="按钮3">

</body>
<script>
  // 获取输入框元素
  var fruitElement = document.getElementById("inputFruit");
  // alert("阻塞运行");
  console.log('🤡 CC - fruitElement:', fruitElement);
  if (fruitElement) {
    var fruitValue = fruitElement.value;
    console.log('🤡 CC - fruitValue:', fruitValue);
    switch (fruitValue) {
      case "苹果":
        // alert("用户喜欢苹果");
        break;
      case "香蕉":
        // alert("用户喜欢🍌");
        break;
    }
  }

  function clickBtn1() {
    console.log("btn1被点击");
  }
  // 通过id获取按钮元素
  var btn3 = document.getElementById("btn3");
  console.log('🤡 CC - btn3:', btn3);
  if (btn3) {
    btn3.onclick = function () {
      console.log("btn3被点击");
    }
  }
</script>

</html>